{% extends 'base.html' %}
{% load static %}

{% block title %}主页 - 机械臂实验系统{% endblock %}

{% block extra_css %}
<style>
    .jumbotron {
        background-color: #f8f9fa;
        padding: 3rem 2rem;
        margin-bottom: 2rem;
        border-radius: 10px;
    }
    
    .feature-card {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
    }
    
    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    
    .feature-card .card-img-top {
        height: 200px;
        object-fit: cover;
    }
    
    .feature-card .card-body {
        padding: 1.5rem;
    }
    
    .feature-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        color: #007bff;
    }
    
    .section-title {
        margin-bottom: 2rem;
        position: relative;
        padding-bottom: 0.5rem;
    }
    
    .section-title:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50px;
        height: 3px;
        background-color: #007bff;
    }
    
    .robot-banner {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
        border-radius: 10px;
    }
</style>
{% endblock %}

{% block content %}
<div class="jumbotron">
    <div class="row align-items-center">
        <div class="col-lg-6">
            <h1 class="display-4 mb-4">欢迎使用机械臂实验系统</h1>
            <p class="lead">
                本系统提供交互式的机械臂操作实验平台，帮助您学习和掌握工业机械臂的基本操作与拧螺丝工艺参数分析。
            </p>
            <hr class="my-4">
            <p>通过本系统，您将体验机械臂精确定位、扣住螺丝、自动拧出和放置等完整操作流程！</p>
            <a class="btn btn-primary btn-lg" href="{% url 'experiment_platform' %}" role="button">
                <i class="bi bi-robot"></i> 进入实验平台
            </a>
        </div>
        <div class="col-lg-6">
            <img src="{% static 'img/stock/robot-machine-arm-working.jpg' %}" 
                 alt="机械臂图片" class="robot-banner">
        </div>
    </div>
</div>

<h2 class="section-title">关于机械臂</h2>
<div class="row mb-5">
    <div class="col-lg-8">
        <p>
            机械臂是一种能够模仿人类手臂功能，完成各种复杂操作任务的自动化装置。在现代工业中，机械臂广泛应用于制造、装配、检测等多个领域。
        </p>
        <p>
            UR5 机械臂是一种广泛应用于工业领域的协作机器人。螺栓驱动器（即电机）和六维力/力矩传感器被顺序地安装在机器人的末端执行器上，作为拆卸工具的通用套筒连接到电机下方。
我们的实验系统模拟了ur5机械臂的操作环境，您可以通过鼠标控制机械臂完成连贯的螺丝拆卸操作：接近——>搜索啮合——>拆卸评估——>离开。拆卸评估阶段可提供自动化拆卸螺丝，可以选择不同规格的螺栓（M3/M4/M5/M6/M8/M10/M12/M14）和不同的电机转速（100/150/200r/min），并通过实时力数据可视化观察螺丝拆卸过程中，通用套筒与螺丝紧固件之间的接触力变化情况。在我们的拆卸系统里，力传感器安装在机器人末端与通用套筒之间，故接触力可以间接传递到机器人，基于机器学习模型的分析结果，调整机械臂的上升速度，以实现弹性拆卸，避免套筒与螺丝之间的碰撞。        </p>
        <div class="d-flex mt-4">
            <div class="me-4">
                <h5><i class="bi bi-check-circle-fill text-success"></i> 精确操作</h5>
                <p class="text-muted">直观的鼠标控制方式</p>
            </div>
            <div class="me-4">
                <h5><i class="bi bi-check-circle-fill text-success"></i> 参数化设置</h5>
                <p class="text-muted">灵活选择螺栓规格和电机转速</p>
            </div>
            <div>
                <h5><i class="bi bi-check-circle-fill text-success"></i> 数据可视化</h5>
                <p class="text-muted">实时力数据分析展示</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card feature-card h-100">
            <div class="card-body text-center">
                <div class="feature-icon">
                    <i class="bi bi-gear-wide-connected"></i>
                </div>
                <h4 class="card-title">实验参数</h4>
                <ul class="list-unstyled text-start">
                    <li><i class="bi bi-dot"></i> 螺栓规格:</li>
                    <li><i class="bi bi-dot"></i> M3/M4/M5/M6/M8/M10/M12/M14</li>
                    <li><i class="bi bi-dot"></i> 电机转速: 100/150/200 r/min</li>
                    <li><i class="bi bi-dot"></i> 螺纹线数: 1/2</li>
                    <li><i class="bi bi-dot"></i> 实验步骤: 4步完整流程</li>
                    <li><i class="bi bi-dot"></i> 拧螺丝方式: 手动/自动</li>
                    <li><i class="bi bi-dot"></i> 数据展示: 实时力数据可视化</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<h2 class="section-title">功能区</h2>
<div class="row">
    <div class="col-md-4 mb-4">
        <div class="card feature-card">
            <img src="{% static 'img/stock/automation-industry-machine.jpg' %}" 
                 class="card-img-top" alt="实验平台">
            <div class="card-body">
                <h4 class="card-title">实验平台</h4>
                <p class="card-text">
                    通过交互式3D实验平台，您可以控制机械臂完成拧螺丝的全过程，体验从定位到放置的完整操作流程。
                </p>
                <a href="{% url 'experiment_platform' %}" class="btn btn-outline-primary">进入平台</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card feature-card">
            <img src="{% static 'img/stock/open-laptop-desk.jpg' %}" 
                 class="card-img-top" alt="实验指南">
            <div class="card-body">
                <h4 class="card-title">实验指南</h4>
                <p class="card-text">
                    提供详细的步骤说明和操作方法，包括定位、扣住、拧下和放置螺丝的完整指导，帮助您顺利完成实验。
                </p>
                <a href="{% url 'experiment_guide' %}" class="btn btn-outline-primary">查看指南</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card feature-card">
            <img src="{% static 'img/stock/data-spreadsheet.jpg' %}" 
                 class="card-img-top" alt="实验记录">
            <div class="card-body">
                <h4 class="card-title">实验记录</h4>
                <p class="card-text">
                    查看您的历史实验数据，包括不同参数设置下的操作记录，帮助您分析不同工艺参数对拧螺丝过程的影响。
                </p>
                <a href="{% url 'experiment_history' %}" class="btn btn-outline-primary">查看记录</a>
            </div>
        </div>
    </div>
</div>
{% endblock %} 